<template>
  <div class="implementation-page">
    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stat-item">
        <span class="stat-label">近一年受理白蚁任务单总量：</span>
        <span class="stat-value">10</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">成功案例：</span>
        <span class="stat-value">100</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">近一年受理任务单总量的治理满意率：</span>
        <span class="stat-value">99%</span>
      </div>
    </div>

    <!-- 案例列表 -->
    <div class="case-list">
      <div class="case-item" v-for="(item, index) in caseList" :key="index">
        <!-- 序号 -->
        <div class="case-number">{{ index + 1 }}</div>

        <!-- 案例内容 -->
        <div class="case-content">
          <div class="case-title">{{ item.caseName }}</div>

          <div class="case-detail">
            <div class="detail-item">
              <img src="@/assets/images/area.png" class="detail-icon" />
              <span class="detail-label">防治面积(m²)：</span>
              <span class="detail-value">{{ item.area }}</span>
            </div>

            <div class="detail-item">
              <img src="@/assets/images/plan.png" class="detail-icon" />
              <span class="detail-label">防治方案：</span>
              <span class="detail-value">{{ item.plan }}</span>
            </div>

            <div class="detail-item">
              <img src="@/assets/images/effect.png" class="detail-icon" />
              <span class="detail-label">效果评估：</span>
              <span class="detail-value">{{ item.controlEffect }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { termite } from "@/api/index";
export default {
  name: "implementationStatus",
  props: {
    controlId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      caseList: [],
    };
  },
  created() {
    this.getPreventionControlStatus();
  },
  methods: {
    getPreventionControlStatus() {
      termite
        .getPreventionControlStatus({
          id: this.controlId,
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            this.caseList = res.data;
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.implementation-page {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100%;

  .stats-section {
    background: transparent;
    padding: 0;
    margin-bottom: 16px;

    .stat-item {
      display: flex;
      align-items: baseline;
      margin-bottom: 11px;
      font-size: 14px;
      color: #333;

      &:last-child {
        margin-bottom: 0;
      }

      .stat-label {
        color: #333;
        font-weight: 400;
      }

      .stat-value {
        color: #0091fc;
        font-size: 14px;
        margin-left: 6px;
      }
    }
  }

  .case-list {
    .case-item {
      display: flex;
      background: linear-gradient(180deg, #dcebff 0%, #ffffff 100%);
      border-radius: 4px;
      padding: 16px;
      padding-left: 30px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(25, 144, 255, 0.08);
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      .case-number {
        position: absolute;
        left: 0;
        top: 0;
        width: 24px;
        height: 24px;
        background: linear-gradient(180deg, #73a5f6 0%, #abe4ff 100%);
        border-radius: 4px 0px 4px 0px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
      }

      .case-content {
        flex: 1;

        .case-title {
          font-size: 17px;
          font-weight: 600;
          color: #333;
          margin-bottom: 14px;
          line-height: 1.4;
        }

        .case-detail {
          .detail-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 14px;
            line-height: 1.6;

            &:last-child {
              margin-bottom: 0;
            }

            .van-icon {
              margin-right: 8px;
              margin-top: 2px;
              flex-shrink: 0;
            }

            .detail-icon {
              width: 14px;
              height: 14px;
              margin-right: 8px;
              flex-shrink: 0;
            }

            .detail-label {
              color: #666;
              flex-shrink: 0;
            }

            .detail-value {
              color: #333;
              margin-left: 4px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}
</style>
